<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计算机属性computed</title>
</head>
<body>
    <div id="example-2">
        <p><span>firstName:</span><input type="text" v-model="firstName"></p>
        <p><span>lastName:</span><input type="text" v-model="lastName"></p>
        <p><span>fullName:</span>{{fullName}}</p>
    </div>
    <div id="example-3">
        <p><span>firstName:</span><input type="text" v-model="comfirstName"></p>
        <p><span>lastName:</span><input type="text" v-model="comlastName"></p>
        <p><span>fullName:</span>{{comfullName}}</p>
    </div>


<script src="../lib/vue.js"></script>
<script>
    /*
    * 使用$watch与计算属性都能够实现效果
    * 使用计算属性比$watch 写的代码更加少
    * */
    var exampleVm = new Vue({
        el : "#example-2",
        data : {
            firstName : "xia",
            lastName : "xixi",
            fullName : "xia xixi"
        }
    })
    exampleVm.$watch("firstName",function(val){
        this.fullName = val + " " + this.lastName;
    })

    exampleVm.$watch("lastName",function(val){
        this.fullName = this.firstName + " " + val;
    })

    /*
    * computed
    * */
    var exampleVm_2 = new Vue({
        el : "#example-3",
        data : {
            comfirstName : "white",
            comlastName : "quality"
        },
        computed : {
            comfullName : function(){
                return this.comfirstName + " " + this.comlastName;
            }
        }
    })
</script>
</body>
</html>